<!DOCTYPE html>
<html lang="en">

<head>
    <title>Responsive iFrame Test With Table</title>

    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="http://media.npr.org/favicon.ico" />

    <style type="text/css">
        /* base styles */
        html { -webkit-text-size-adjust: none; /* prevent font scaling in landscape */ }

        body {
            margin: 0;
            padding: 10px;
            background-color: #F7F7F7;
            font: 12px/1.4 Arial, Helvetica, sans-serif;
            color: #333;
        }

        h1 {
            margin: 0 0 15px 0;
            font-size: 18px;
            line-height: 1.3;
        }

        a, a:link, a:visited {
            color: #4774CC;
            text-decoration: none;
        }
        a:hover, a:active { opacity: 0.7; }

        .footnotes { margin-bottom: 20px; }
        .footnotes h4 {
            margin: 2px 0 7px 0;
            color: #666;
            font-size: 11px;
        }
        .footnotes p,
        .footer p {
            margin: 2px 0 0 0;
            font-size: 11px;
            line-height: 1.3;
            color: #808080;
        }

        table {
            border-collapse: collapse;
            padding: 0;
            margin: 0 0 11px 0;
            width: 100%;
        }

        table th {
            text-align: left;
            border-bottom: 2px solid #eee;
            vertical-align: bottom;
            padding: 0 10px 10px 10px;
            text-align: right;
        }

        table td {
            border-bottom: 1px solid #eee;
            vertical-align: top;
            padding: 10px;
            text-align: right;
        }

        table th:nth-child(1),
        table td:nth-child(1) {
            text-align: left;
            padding-left: 0;
            font-weight: bold;
        }

        /* responsive table */
        @media screen and (max-width: 480px) {
            table,
            tbody {
                display: block;
                width: 100%:
            }

            thead { display: none; }

            table tr,
            table th,
            table td {
                display: block;
                padding: 0;
                text-align: left;
                white-space: normal;
            }

            table tr {
                border-bottom: 1px solid #eee;
                padding-bottom: 11px;
                margin-bottom: 11px;
            }

            table th[data-title]:before,
            table td[data-title]:before {
                content: attr(data-title) ":\00A0";
                font-weight: bold;
            }

            table td {
                border: none;
                margin-bottom: 6px;
                color: #444;
            }
            table td:empty { display: none; }
            table td:first-child {
                font-size: 14px;
                font-weight: bold;
                margin-bottom: 6px;
                color: #333;
            }
            table td:first-child:before { content: ''; }
        }
    </style>

</head>
<body>
    <h1>Unemployment rate, by educational attainment (January-March 2014)</h1>

    <table>
        <thead>
            <tr>
                <th>Category</th>
                <th>January</th>
                <th>February</th>
                <th>March</th>
            </tr>
        </thead>
        <tr>
            <td data-title="Category">Total (16 years and over)</td>
            <td data-title="January">6.6</td>
            <td data-title="February">6.7</td>
            <td data-title="March">6.7</td>
        </tr>
        <tr>
            <td data-title="Category">Less than a high school diploma</td>
            <td data-title="January">9.6</td>
            <td data-title="February">9.8</td>
            <td data-title="March">9.6</td>
        </tr>
        <tr>
            <td data-title="Category">High school graduates, no college</td>
            <td data-title="January">6.5</td>
            <td data-title="February">6.4</td>
            <td data-title="March">6.3</td>
        </tr>
        <tr>
            <td data-title="Category">Some college or associate degree</td>
            <td data-title="January">6.0</td>
            <td data-title="February">6.2</td>
            <td data-title="March">6.1</td>
        </tr>
        <tr>
            <td data-title="Category">Bachelor&rsquo;s degree and higher</td>
            <td data-title="January">3.2</td>
            <td data-title="February">3.4</td>
            <td data-title="March">3.4</td>
        </tr>
    </table>

    <div class="footnotes">
        <h4>Note</h4>
        <p>Figures for February and March 2014 are preliminary.</p>
    </div>

    <div class="footer">
        <p>Source: Bureau of Labor Statistics</p>
        <p>Credit: NPR</p>
    </div>

    <script src="../../src/pym.js" type="text/javascript"></script>
    <script>var pymChild = new pym.Child();</script>
</body>
</html>
